<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>球队主页</title>
  <link rel="stylesheet" href="../css/bootstarp.min.css">
  <link rel="stylesheet" href="./fbt.css">
</head>

<body>


  <!-- 上:一个排序，两个搜索框，三个按钮 -->
  <div class="up">

    <label>
      <input type="text" id="txt_tname" class="input-group-text input-group-sm" placeholder="球队名称模糊查询">
    </label>
    <label>
      <input type="text" id="txt_league" class="input-group-text input-group-sm" placeholder="所属联赛模糊查询">
    </label>

    <label>
      <select id="sel_order" class=" form-select ">
        <option value="1">粉丝数</option>
        <option value="2">联赛冠军数</option>
        <option value="3">杯赛冠军数</option>
        <option value="4">数据添加时间</option>
      </select>
    </label>

    <button id="btnQuery" class="btn btn-primary btn-sm">查询</button>
    <button id="btnReset" class="btn btn-danger btn-sm">重置</button>
    <button id="btnAdd" class="btn btn-warning btn-sm">添加球队</button>

  </div>

  <!-- 中:表格 10列 -->
  <div>
    <table class="table table-sm">
      <thead>
        <tr>
          <th>编号</th>
          <th>球队名称</th>
          <th>所属联赛</th>
          <th>联赛冠军数量</th>
          <th>杯赛冠军数量</th>
          <th>粉丝数(万)</th>
          <th>进球数记录</th>
          <th>进球数记录保持者</th>
          <th>俱乐部创建时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody id="tbData"></tbody>
    </table>
  </div>

  <!-- 下:分页 -->
  <div class="down">
    <button id="btnPre" class="btn btn-outline-secondary btn-sm"> &lt; </button>
    <span id="spPage"></span>
    <button id="btnNext" class="btn btn-outline-secondary btn-sm"> &gt; </button>
  </div>






  <script type="module" src="./fbt.js"></script>

</body>

</html>